import {useState} from 'react'

// 1.父组件定义一个带参数的函数，直接传给子组件
function App() {

    // 能引起视图改变的数据 用 useState
    const [msg, setMsg] = useState('')

    const sendMsg = (msg) => {
        console.log(msg)
        setMsg(msg)
    };

    return (
        <div className="App">
            <Son  onSendMsg={sendMsg} /> {msg}
        </div>
    );
}

// 2. 子组件 参数结构赋值 接收父组件传的函数参数，并传入实参调用函数
function Son({onSendMsg}) {
    const sonMsg = 'son msg'
    return <button onClick={() => onSendMsg(sonMsg)}>sendSonMsg</button>
}

export default App;